import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import './dialog.scss'

export default class Dialog extends Component {
  render() {
    let { show, close, title, content } = this.props
    return ReactDOM.createPortal(
      <div className="mask"
        style={show ? {display: 'block'} : {display: 'none'}}>
        <div className='dialog' 
          style={show ? {display: 'block'} : {display: 'none'}}>
          <div className="header">
            <span>{title || '标题'}</span>
            <span onClick={ close }>x</span>
          </div>
          <div className="content">
            {content || '这是一段提示内容'}
          </div>
          <div className="footer">
            <span>取消</span>
            <span className='operation'>确认</span>
          </div>
        </div>
      </div>,
      document.body
    )
  }
}
